<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="panel panel-default panel-intro">
        <div class="panel-heading">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#first" data-toggle="tab">商品</a></li>
                <li><a href="#second" data-toggle="tab">规格</a></li>
            </ul>
        </div>
        <div class="panel-body">
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade active in" id="first">

                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('Goodtype_id')}:</label>
                        <div class="col-xs-12 col-sm-8">
                            <input id="c-goodtype_id" data-rule="required" data-source="goodtype/index" class="form-control selectpage" name="row[goodtype_id]" type="text" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
                        <div class="col-xs-12 col-sm-8">
                            <input id="c-name" class="form-control" name="row[name]" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('Images')}:</label>
                        <div class="col-xs-12 col-sm-8">
                            <div class="input-group">
                                <input id="c-images" class="form-control" size="50" name="row[images]" type="text">
                                <div class="input-group-addon no-border no-padding">
                                    <span><button type="button" id="faupload-images" class="btn btn-danger faupload" data-input-id="c-images" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="true" data-preview-id="p-images"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                    <span><button type="button" id="fachoose-images" class="btn btn-primary fachoose" data-input-id="c-images" data-mimetype="image/*" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                                </div>
                                <span class="msg-box n-right" for="c-images"></span>
                            </div>
                            <ul class="row list-inline faupload-preview" id="p-images"></ul>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('Image')}:</label>
                        <div class="col-xs-12 col-sm-8">
                            <div class="input-group">
                                <input id="c-image" class="form-control" size="50" name="row[image]" type="text">
                                <div class="input-group-addon no-border no-padding">
                                    <span><button type="button" id="faupload-image" class="btn btn-danger faupload" data-input-id="c-image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                    <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                                </div>
                                <span class="msg-box n-right" for="c-image"></span>
                            </div>
                            <ul class="row list-inline faupload-preview" id="p-image"></ul>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('标签')}:</label>
                        <div class="col-xs-12 col-sm-8">
                            
                            <table class="table fieldlist" data-template="eventtpl" data-name="row[labeljson]" id="second-table">
                                <tr>
                                    <td>{:__('标签')}</td>
                                    <td>{:__('图片')}</td>
                                    <td width="100"></td>
                                </tr>
                                <tr>
                                    <td colspan="4"><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a></td>
                                </tr>
                            </table>
                            <!--请注意实际开发中textarea应该添加个hidden进行隐藏-->
                                <textarea name="row[labeljson]" class="form-control hide" cols="30" rows="5"></textarea>
                                <script id="eventtpl" type="text/html">
                                    <tr class="form-inline">
                                        <td><input type="text" name="<%=name%>[<%=index%>][name]" class="form-control" size="10" value="<%=row.name%>" placeholder="标题"/></td>
                                        <td>
                                            <input type="hidden" name="<%=name%>[<%=index%>][image]" id="c-image-<%=index%>" value="<%=row.image%>">
                                            <!--@formatter:off-->
                                            <button type="button" id="faupload-image" class="btn btn-danger faupload upload-image" data-input-id="c-image-<%=index%>" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" style="width:50px;height:50px; background: no-repeat url('<%=row.image%>');background-size:50px 50px;border:1px solid #eee"></button>
                                            <!--@formatter:on-->
                                        </td>
                                        <td>
                                            <!--下面的两个按钮务必保留-->
                                            <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
                                            <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
                                        </td>
                                    </tr>
                                </script>

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('Price')}:</label>
                        <div class="col-xs-12 col-sm-8">
                            <input id="c-price" class="form-control" step="0.01" name="row[price]" type="number">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('Del_price')}:</label>
                        <div class="col-xs-12 col-sm-8">
                            <input id="c-del_price" class="form-control" step="0.01" name="row[del_price]" type="number">
                        </div>
                    </div>
<!--                    <div class="form-group">-->
<!--                        <label class="control-label col-xs-12 col-sm-2">{:__('Vip_price')}:</label>-->
<!--                        <div class="col-xs-12 col-sm-8">-->
<!--                            <input id="c-vip_price" class="form-control" step="0.01" name="row[vip_price]" type="number">-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label>
                        <div class="col-xs-12 col-sm-8">
                            <textarea id="c-content" class="form-control editor" rows="5" name="row[content]" cols="50"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('Sellnum')}:</label>
                        <div class="col-xs-12 col-sm-8">
                            <input id="c-sellnum" class="form-control" name="row[sellnum]" type="number">
                        </div>
                    </div>
<!--                    <div class="form-group">-->
<!--                        <label class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>-->
<!--                        <div class="col-xs-12 col-sm-8">-->
<!--                            <input id="c-weigh" class="form-control" name="row[weigh]" type="number">-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('Tui_switch')}:</label>
                        <div class="col-xs-12 col-sm-8">
                            <input  id="c-tui_switch" name="row[tui_switch]" type="hidden" value="0">
                            <a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-tui_switch" data-yes="1" data-no="0" >
                                <i class="fa fa-toggle-on text-success fa-flip-horizontal text-gray fa-2x"></i>
                            </a>
                        </div>
                    </div>
                    

                </div>
                <div class="tab-pane fade" id="second">
                    <div id="vuediv">
                        <textarea class="hidden" id="c-specList" class="form-control" rows="5" name="row[specList]" cols="50">{{JSON.stringify(specList)}}</textarea>
                        <textarea class="hidden" id="c-tableData" class="form-control" rows="5" name="row[tableData]" cols="50">{{JSON.stringify(tableData)}}</textarea>

                        <div class="row">
                            <div class="col-xs-12 col-sm-4">
                                <label class="">规格名称:</label>
                                <div class="right">
                                    <div class="input-group">
                                        <input id="spec_names" class="form-control" type="text" v-model="spec_name">
                                        <div class="input-group-btn">
                                            <a @click="addSpec" class="btn btn-success" style="width:120px">
                                                <i class="fa fa-plus"></i>{:__('添加规格')}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="height: 20px"></div>
                        <div class="panel panel-default" v-for="(spec,key) in specList" :key="key">
                            <div class="panel-heading" style="padding:5px 15px;">
                                <span>{{spec.name}}</span>
                                <span class="btn btn-remove" @click="removeSpec(key)">
                                    <i class="fa fa-close"></i>
                                </span>
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" v-for="(val,index) in spec.value" :key="index">
                                        <div class="input-group">
                                            <input style="margin-bottom: 5px" id="a" :id="'spec'+key+index" type="text" class="form-control" placeholder="" v-model="specList[key].value[index]">
                                            <div class=" input-group-btn">
                                            <span class="btn btn-remove" @click="removeSpecValue(key,index)">
                                                <i class="fa fa-close"></i>
                                            </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                                        <a href="javascript:;" class="btn btn-sm btn-success" @click="addSpecValue(key)"><i class="fa fa-plus"></i>{:__('Append')}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 规格表格展示 -->
                        <div class="goods-sku-table">
                            <table class="table table-striped table-bordered table-hover table-nowrap">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>
                                        规格
                                    </th>
                                    <th>规格封面</th>
                                    <th>
                                        价格
                                    </th>
                                    <th>
                                        划线价
                                    </th>
<!--                                    <th>-->
<!--                                        会员价-->
<!--                                    </th>-->
                                    <th>
                                        库存数量
                                    </th>

                                    <th>
                                        操作
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(item,index) in tableData" :key="index">
                                    <th scope="row">{{index+1}}</th>
                                    <td  style="text-align: center;">
                                        {{item.specificationvalues_names}}
                                    </td>
                                    <td class="td-img">
                                        <img style="width: 30px;height: 30px;" :data-multipart="JSON.stringify({index:index})" :id="'uploadimg' + index"  :src="item.image ? item.image:'/assets/img/add.jpg'" alt="点击上传">
                                    </td>
                                    <td>
                                        <input class="form-control" type="number" v-model="tableData[index].price">
                                    </td>
                                    <td>
                                        <input class="form-control" type="number" v-model="tableData[index].del_price">
                                    </td>
<!--                                    <td>-->
<!--                                        <input class="form-control" type="number" v-model="tableData[index].vip_price">-->
<!--                                    </td>-->
                                    <td>
                                        <input class="form-control" type="number" v-model="tableData[index].stock">
                                    </td>

                                    <td>
                                        <a href="javascript:;" class="btn btn-xs btn-danger"  @click="del(index)"><i class="fa fa-trash"></i></a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        </div>
    </div>
</form>
